---
import GithubIcon from "./GithubIcon.astro";
---

<header class="p-4 lg:p-6 border-b-3 border-black bg-white">
  <nav class="flex flex-wrap md:flex-nowrap items-end gap-3 md:gap-4">
    <!-- Title -->
    <a
      href="/"
      class="block bg-primary text-xl md:text-2xl lg:text-4xl text-white font-bold
        border-3 border-black
        px-3 md:px-4 py-1.5 lg:py-2 max-w-full break-words
        shadow-neo hover:shadow-none transition-all hover:translate-y-0.5"
      >陈刑's TECH GUIDES</a
    >

    <!-- GitHub (right on both; on small, stays on first row) -->
    <div class="ml-auto order-2 md:order-3">
      <GithubIcon repoUrl="https://github.com/chenxing-dev/blog" />
    </div>

    <!-- Section buttons (forced to second row on small; inline on large) -->
    <!-- Only visible when not on homepage -->
    {
      !Astro.url.pathname.endsWith("/") && (
        <div class="order-3 md:order-2 w-full md:w-auto flex gap-2 items-end">
          <div class="text-sm md:text-base italic text-neutral-600 flex gap-2">
            <a
              href="/linux-guides"
              class="bg-secondary text-black font-bold
              border-3 border-black
              px-3 py-1.5 h-full
              shadow-neo hover:shadow-none transition-all hover:translate-y-0.5"
            >
              Linux Guides
            </a>
            <a
              href="/web-dev"
              class="bg-cyan text-black font-bold
              border-3 border-black
              px-3 py-1.5 h-full
              shadow-neo hover:shadow-none transition-all hover:translate-y-0.5"
            >
              Web Dev Guides
            </a>
          </div>
        </div>
      )
    }
  </nav>
</header>
